<template>
	<div class="index_news_show">
		<div class="hand">
			<ul>
				<li :class="{ active: newsType === 'office' }" @mouseenter="handleMouseenter('office')">机关动态</li>
				<li :class="{ active: newsType === 'base' }" @mouseenter="handleMouseenter('base')">基层动态</li>
			</ul>
			<router-link :to="{ path: `/news/${newsType}` }">
				更多
				<i class="el-icon-arrow-right"></i>
			</router-link>
		</div>
		<div v-loading="loading">
			<div class="head">
				<h2>
					<router-link :to="{ path: `/news/${newsType}/${newsHeadData.id}` }">{{ newsHeadData.title }}</router-link>
				</h2>
				<p>
					<span v-dynamics-text="[newsHeadData.outline, 70]"></span>
					<router-link :to="{ path: `/news/${newsType}/${newsHeadData.id}` }">[查看详情]</router-link>
				</p>
			</div>
			<div class="list">
				<div class="item" v-for="(item, index) in newsListData" :key="index">
					<router-link :to="{ path: `/news/${newsType}/${item.id}` }">{{ item.title }}</router-link>
					<span>{{ item.pubDate }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			newsType: 'office',
			officeNewsData: [],
			baseNewsData: [],
			storeNewsData: [],
			loading: false
		};
	},
	directives: {
		dynamicsText(el, bind) {
			let valueText = !bind.value[0] ? '' : bind.value[0].replace(/<[^>]+>/g, '');
			el.innerHTML = valueText;
			if(!valueText) return false;
			if(valueText.length > bind.value[1]) {
				let subText = valueText.substring(0, bind.value[1]);
				el.innerHTML = subText + '...';
			}
		}
	},
	computed: {
		newsHeadData() {
			if(this.storeNewsData.length > 0) {
				if(this.storeNewsData.some((item) => item.isHeadlines === '1')) {
					return this.storeNewsData.filter((item) => item.isHeadlines === '1')[0];
				} else {
					return this.storeNewsData[0];
				}
			} else {
				return {};
			}
		},
		newsListData() {
			return this.storeNewsData.slice(1, 7);
		}
	},
	watch: {
		newsType(val) {
			if(val === 'office') {
				this.storeNewsData = [...this.officeNewsData];
			} else if(val === 'base') {
				this.storeNewsData = [...this.baseNewsData];
			}
		},
		loading(flag) {
			if(!!flag) return false;
			if(this.newsType === 'office') {
				this.storeNewsData = [...this.officeNewsData];
			} else if(this.newsType === 'base') {
				this.storeNewsData = [...this.baseNewsData];
			}
		}
	},
	async mounted() {
		this.loading = true;
		this.officeNewsData = await this.getStoreNewsData('279').then((res) => res);
		this.baseNewsData = await this.getStoreNewsData('206').then((res) => res);
		this.loading = false;
	},
	methods: {
		...mapActions(['getNewsData']),

		//切换新闻
		handleMouseenter(type) {
			this.newsType = type;
		},

		//获取仓库新闻动态数据
		async getStoreNewsData(classifyId) {
			let result = await this.getNewsData({ page: 1, limit: 7, classifyId, sort: 'create_time desc' });
			if(result.code === '0') {
				return !result.data ? [] : [...result.data];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.index_news_show {
	margin-bottom: 40px;

	.hand ::v-deep {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		border-top: solid 1px rgba(0, 0, 0, 0.2);

		ul {
			display: flex;
			height: 49px;
			margin-top: -1px;
		}

		li {
			font-size: 20px;
			padding: 0 10px;
			margin-right: 30px;
			line-height: 46px;
			border-top: solid 3px transparent;
			cursor: pointer;

			&.active {
				color: #357c65;
				font-weight: bold;
				border-top-color: #357c65;
			}
		}

		a {
			display: flex;
			align-items: center;
			text-decoration: none;
			color: #666;

			&:hover {
				color: #357c65;
			}
		}
	}

	.head {
		padding: 20px 0;
		border-bottom: solid 1px #e7e7e7;

		h2 {
			font-size: 18px;
			font-weight: normal;
			text-align: center;
			color: rgba(0, 0, 0, 0.9);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			a {
				text-decoration: none;
				color: inherit;

				&:hover {
					color: #357c65;
				}
			}
		}

		p {
			font-size: 16px;
			color: #999;
			margin-top: 12px;
			line-height: 1.5;
			height: 48px;
			overflow: hidden;
		}

		a {
			color: #357c65;
			text-decoration: none;
		}
	}

	.list {
		padding-top: 20px;

		.item {
			display: flex;
			align-items: center;
			padding: 10px 0;

			&::before {
				display: block;
				width: 6px;
				height: 6px;
				content: '';
				background-color: #357c65;
				flex-shrink: 0;
				margin-right: 15px;
			}
		}

		span {
			flex-shrink: 0;
			color: #999;
			margin-left: 20px;
		}

		a {
			flex: 1;
			font-size: 16px;
			line-height: 1.5;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			color: #333;
			text-decoration: none;

			&:hover {
				color: #357c65;
				text-decoration: underline;
			}
		}
	}
}
</style>
>